<!DOCTYPE html>
<html>
<head>


    <title>ATM后台管理系统</title>
</head>
<body class="bgf6">

<div th:include="common/boAtmHeader :: atmHeader"></div>

<div class="main-body pb100" >
    <div class="container pt10">
        <div class="dflx sbt">
            <div th:include="common/boAtmLeft :: atmLeft"></div>

            <div id="app" class="body-right">
                <div class="bread-nav bgff">
                    <ul class="dflx">

                    </ul>
                </div>

                <div class="bgff mt10 pb20 edit-mode">
                    <div class="wrap">

                        <div class="box">
                            <div class="box-title"><span>用户和角色管理</span></div>
                            <div class="mt20 f14">
                                <div class="two">
                                    <span class="title"><i class="cred">*</i>用户名 </span>
                                    <div class="content">
                                        <input type="text" v-model="username" class="form-control parsley-error" value="" placeholder="请输入用户名"/>
                                    </div>
                                    &nbsp; &nbsp;
                                    <el-button type="primary" plain v-on:click="queryUserRole">查询角色</el-button>

                                </div>

                                <div class="two">
                                    <span class="title">角色：</span>

                                    <div class="content">
                                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                        <div style="margin: 15px 0;"></div>
                                        <el-checkbox-group v-model="selRoleIds" @change="handleCheckedCitiesChange">
                                            <el-checkbox v-for="role in roles" :label="role.id" >{{role.roleValue}}</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </div>

                            </div>
                        </div>



                        <div class="tc mt40">

                            <button onclick="createUserRole()" type="button" class="btn btn-primary f12"> 绑定 </button>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $('#signUpButton').click(function () {
        createUserRole();
    });

    var boAtm = new Vue({
        el : '#app',
        data : {
            checkAll: false,
            roles : [],
            selRoleIds : [],
            username : '',
            isIndeterminate: true
        },
        created : function () {
            loadRoles();
        },
        methods : {
            queryUserRole : function() {
                loadUserRole(this.username);
            },
            handleCheckAllChange : function (val) {
                let allRolesId = [];

                if (val) {
                    for (let i=0; i<this.roles.length; i++) {
                        allRolesId.push(this.roles[i].id);
                    }
                }

                this.selRoleIds = allRolesId;
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange : function (value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.roles.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.roles.length;
            }
        }
    })

    function loadUserRole(username) {
        dayuanit.ajax('/user/loadUserRoles', {
            username : username
        }, function (result) {
            boAtm.selRoleIds = result.data;
        })
    }

    function loadRoles() {
        dayuanit.ajax('/user/loadRoles', {}, function (result) {
            boAtm.roles = result.data;
        })
    }

    function createUserRole() {
        if (boAtm.username == '') {
            alert('请输入用户名');
            return;
        }

        dayuanit.ajax('/user/userRoleAllocation', {
            username : boAtm.username,
            roleIds : boAtm.selRoleIds
        }, function (result) {
            alert('用户和角色绑定成功');
        })
    }
</script>

</body>
</html>
